<template>
  <div class="box-card">
    <div v-if="$slots.header" :class="['box-card-header', headerClass]">
      <slot name="header"></slot>
    </div>
    <div :class="['box-card-body', bodyClass]">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    headerClass: {
      type: String,
      default: '',
    },
    bodyClass: {
      type: String,
      default: '',
    },
  },
}
</script>

<style lang="scss">
.box-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
}

.box-card-header {
  color: #333333;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 24px;
}

.box-card-body {
  flex: 1;
}
</style>